jQuery(document).ready(function() {
	function get_max_property_group(){
		var max=0;
		jQuery('div[class^="property-group-"]').each(function(){
            var class_property_group=jQuery(this).attr("class").match(/(property-group-.*?)(?:\s+|$)/);
            if(class_property_group!=null){
                         class_property_group=class_property_group[1];
                         class_property_group=class_property_group.split('-');
                         var class_property_value=class_property_group[2];
                         if(class_property_value>max){
                         	max=class_property_value;
                         }
            }  
        });
        return max;
	}
	jQuery('#add_property_group').click(function(){
		var asset_dir=jQuery(this).attr('rel');
		var max=get_max_property_group();
        if(max!=''){max=parseInt(max)+1;}
        else{max=1;}
		var div_group=
		'<div class="title-box-group-toggle" id="box-group-toggle-'+max+'" rel="'+max+'">'
			+'Features'
			+'<a class="toggle-open">+</a>'
			+'<a class="toggle-close">-</a>'
		+'</div>'
		+'<div class="property-group-'+max+' wrapper-box" style="display: none;">'
			+'<div class="delete-group-'+max+' del-group" rel="'+max+'"></div>'
			+'<div class="select_wrapper" original-title="Choose Group"><span>Features</span>'
				+'<select class="select" name="custom_properties_group['+max+'][group]" id="custom_properties_group_'+max+'_group">'
					+'<option value="features" selected="selected">Features</option>'
					+'<option value="most_recent">Most recent</option>'
					+'<option value="popular">Popular</option>'
				+'</select>'
			+'</div>'
			+'<div style="display:block;clear:both;">'
				+'<span>'
				+'<input type="radio" id="of-radio-img-custom_properties_group['+max+'][layout]one" class="checkbox of-radio-img-radio" value="one" name="custom_properties_group['+max+'][layout]" style="display: none;">'
				+'<div class="of-radio-img-label" style="display: none;">one</div>'
				+'<img src="'+asset_dir+'/images/1col.png" alt="" class="of-radio-img-img " onclick="document.getElementById(\'of-radio-img-custom_properties_group['+max+'][layout]one\').checked = true;" style="display: inline;">'
				+'</span>'

				+'<span>'
				+'<input type="radio" id="of-radio-img-custom_properties_group['+max+'][layout]two" class="checkbox of-radio-img-radio" value="two" name="custom_properties_group['+max+'][layout]" checked="checked" style="display: none;">'
				+'<div class="of-radio-img-label" style="display: none;">two</div>'
				+'<img src="'+asset_dir+'/images/2cr.png" alt="" class="of-radio-img-img of-radio-img-selected" onclick="document.getElementById(\'of-radio-img-custom_properties_group['+max+'][layout]two\').checked = true;" style="display: inline;">'
				+'</span>'

				+'<span>'
				+'<input type="radio" id="of-radio-img-custom_properties_group['+max+'][layout]three" class="checkbox of-radio-img-radio" value="three" name="custom_properties_group['+max+'][layout]" style="display: none;">'
				+'<div class="of-radio-img-label" style="display: none;">three</div>'
				+'<img src="'+asset_dir+'/images/2cl.png" alt="" class="of-radio-img-img " onclick="document.getElementById(\'of-radio-img-custom_properties_group['+max+'][layout]three\').checked = true;" style="display: inline;">'
				+'</span>'

				+'<span>'
				+'<input type="radio" id="of-radio-img-custom_properties_group['+max+'][layout]four" class="checkbox of-radio-img-radio" value="four" name="custom_properties_group['+max+'][layout]" style="display: none;">'
				+'<div class="of-radio-img-label" style="display: none;">four</div>'
				+'<img src="'+asset_dir+'/images/3cm.png" alt="" class="of-radio-img-img " onclick="document.getElementById(\'of-radio-img-custom_properties_group['+max+'][layout]four\').checked = true;" style="display: inline;">'
				+'</span>'

			+'</div>'
		+'<div style="clear:both">'
		+'<input name="custom_properties_group['+max+'][num]" id="custom_properties_group['+max+'][num]" type="text" value="5">'
		+'</div>'
		+'<script type="text/javascript" src="'+asset_dir+'/js/common.js"></script>'
		+'<link rel="stylesheet"  href="'+asset_dir+'/css/zon-admin-ajax.css" type="text/css" media="all" />';
		jQuery('#section-custom_properties_group').append(div_group);
	
	});
	jQuery('div[class^="property-group-"]').each(function(){
		jQuery(this).slideUp();
	});
	
	jQuery('.toggle-open').click(function(){
			var parrent_id=jQuery(this).parent().attr('id');
			var parrent_toggle=jQuery(this).parent().attr('rel');
			jQuery('.property-group-'+parrent_toggle).slideDown();
			jQuery(this).hide();
			jQuery('#'+parrent_id+' .toggle-close').show();
			
			
	});
	
	jQuery('.toggle-close').click(function(){
			var parrent_id=jQuery(this).parent().attr('id');
			var parrent_toggle=jQuery(this).parent().attr('rel');
			jQuery('.property-group-'+parrent_toggle).slideUp();
			jQuery(this).hide();
			jQuery('#'+parrent_id+' .toggle-open').show();
			
			
	});
	
	jQuery('.del-group').click(function(){
			var box_id=jQuery(this).attr('rel');
			jQuery('.property-group-'+box_id).fadeOut();
			jQuery('.property-group-'+box_id).remove();
			jQuery('#box-group-toggle-'+box_id).remove();
	});

	//Masked Inputs (images as radio buttons)
	jQuery('.of-radio-img-img').click(function(){
		jQuery(this).parent().parent().find('.of-radio-img-img').removeClass('of-radio-img-selected');
		jQuery(this).addClass('of-radio-img-selected');
	});
	jQuery('.of-radio-img-label').hide();
	jQuery('.of-radio-img-img').show();
	jQuery('.of-radio-img-radio').hide();
	
	//Masked Inputs (background images as radio buttons)
	jQuery('.of-radio-tile-img').click(function(){
		jQuery(this).parent().parent().find('.of-radio-tile-img').removeClass('of-radio-tile-selected');
		jQuery(this).addClass('of-radio-tile-selected');
	});
	jQuery('.of-radio-tile-label').hide();
	jQuery('.of-radio-tile-img').show();
	jQuery('.of-radio-tile-radio').hide();
});